<template>
  <BaseDialog
    :title="getTitle"
    :visible="visible"
    :auto-height="true"
    :width="480"
    confirm-text="确定"
    @open="handleOpen"
    @handle-confirm="handleCacheConfirm"
    @close="handleCacheClose"
  >
    <el-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      class="w-full text-[#000]"
      label-width="90"
    >
      <el-form-item label="用户名字:" prop="username">
        <el-input
          v-if="!isEdit"
          v-model="formState.username"
          placeholder="请填写用户名字"
          class="w-full"
        />
        <span v-else class="text-[12px]">{{ formState.username }}</span>
      </el-form-item>
      <el-form-item label="角色:" prop="role">
        <span class="text-[12px]">{{
          formState.role === 1 ? '超级管理员' : '管理员'
        }}</span>
      </el-form-item>
      <el-form-item label="备注:" prop="remark">
        <el-input
          v-model="formState.remark"
          placeholder="请填写备注"
          class="w-full"
        />
      </el-form-item>
      <el-form-item label="状态:" prop="status">
        <el-radio-group v-model="formState.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </BaseDialog>
</template>

<script setup lang="ts">
import BaseDialog from '@/components/base-dialog'
import type { FormInstance, FormItemRule } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { ElNotification } from 'element-plus'
interface IFormState {
  username: string
  role?: number
  status: number
  remark: string
}

const formRef = ref<FormInstance>()
const formState = reactive<IFormState>({
  username: '',
  role: undefined,
  status: 1,
  remark: ''
})
interface IProps {
  visible: boolean
  record: any
}
const props = withDefaults(defineProps<IProps>(), {})
interface IEmits {
  // 更新 显示状态
  (event: 'update:visible', value: boolean): void
  // 通知上层更新
  (event: 'reload'): void
  // 通知上层更新
  (event: 'close-dialog'): void
}
const emit = defineEmits<IEmits>()

const isEdit = ref(false)
const getTitle = computed(() => (isEdit.value ? '编辑账户' : '添加账户'))

/**
 * 需要了解 Ts里面的 keyof, Pick, Omit 语法
 * keyof Pick<IFormState, 'username' | 'email' | 'website'>挑选出 'username' | 'email' | 'website' 做验证
 * keyof Omit<IFormState, 'phone' | 'description'> 挑选出 'phone' | 'description' 不做验证
 * keyof IFormState 验证所有
 */
const rules: Record<
  keyof Pick<IFormState, 'username' | 'status'>,
  FormItemRule[]
> = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 18, message: '用户名长度为2-18', trigger: 'blur' }
  ],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}
//弹窗打开
const handleOpen = () => {
  if (props.record?.id) {
    isEdit.value = true
    Object.assign(formState, cloneDeep(props.record))
    return false
  }
  isEdit.value = false
}
// 弹窗确认
const handleCacheConfirm = () => {
  formRef.value?.validate().then(() => {
    const apiPath = isEdit.value ? edit_user : add_user
    const params = { ...formState }
    apiPath({ ...params }).then(() => {
      const msg = isEdit.value ? '编辑' : '添加'
      ElNotification.success({
        title: '成功',
        message: msg + '成功'
      })
      emit('update:visible', false)
      emit('reload')
    })
  })
}
// 弹窗关闭
const handleCacheClose = () => {
  emit('close-dialog')
  emit('update:visible', false)
  formRef.value?.resetFields()
}
</script>

<style scoped lang="scss">
:deep(.el-form-item__label) {
  font-size: 12px;
}
:deep(.el-radio__label) {
  font-size: 12px;
}
</style>
